<template>
  <div>
    <div class="tou">
      <div class="biaoti">计费项目查看</div>
    </div>

    <div>
      <div class="meihang">
        <div class="qianmianming">计费项目名称：</div>
        <div class="houmianzhi">{{xinxi.payname}}</div>
      </div>
      <div class="meihang">
        <div class="qianmianming">项目优先级：</div>
        <div class="houmianzhi">{{xinxi.paylevel}}</div>
      </div>
      <div class="meihang">
        <div class="qianmianming">项目用量/时长：</div>
        <div class="houmianzhi">{{xinxi.paynum}}</div>
      </div>
      <div class="meihang">
        <div class="qianmianming">项目价格：</div>
        <div class="houmianzhi">{{xinxi.paymoney}}</div>
      </div>
      <div class="meihang">
        <div class="qianmianming">通知状态：</div>
        <div class="houmianzhi">
            {{ xinxi.coststatus === 1 ? '已通知' : (xinxi.coststatus === 2 ? '未通知' : xinxi.coststatus) }}
        </div>
      </div>
      <div class="meihang">
        <div class="qianmianming">通知人：</div>
        <div class="houmianzhi">{{xinxi.username}}</div>
      </div>
      <div class="meihang">
        <div class="qianmianming">通知内容：</div>
        <div class="houmianzhi" v-html="xinxi.paycontent"></div>
      </div>
    </div>

    <div class="fanhui" @click="gohuiqu()">
      <i class="el-icon-refresh-left"></i>返回
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chakanid: "",
      xinxi:[],
    };
  },
  created() {
    this.xianna();
    this.getlist()
  },
  methods: {
    xianna() {
      this.chakanid = localStorage.getItem("chakanid");
    },
    async getlist() {
      let res = await this.$axios.get(
        "http://community.byesame.com/cost/getCostDetail?id=" +
          this.chakanid +
          "&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjcxNTE4NDA4MzUxMTQxLmpwZyIsInR5cGUiOiIxIiwiaWF0IjoxNzYxNjEyMTM5LCJleHAiOjE3NjE2OTg1Mzl9.GCKh0ZClDfwlY7U6q-QRKgGI2VSTVrPVqZFOEI7ewi0"
      );
    //   console.log(res);
      this.xinxi = res.data[0]
      console.log(this.xinxi);
      
    },
      gohuiqu() {
      this.$router.replace("payType");
    },
    
  },
};
</script>

<style>
.fanhui {
  width: 80px;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 200px;
  border-radius: 8px;
  background: #409eff;
  color: white;
  text-align: center;
  line-height: 40px;
}
.meihang {
  margin-top: 20px;
}
.houmianzhi {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 15px;
  display: inline-block;
}
.qianmianming {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: right;
  font-size: 15px;
  display: inline-block;
  margin-right: 20px;
}
.tou {
  width: 100%;
  height: 50px;
  background: #f0f0f0;
}
.biaoti {
  width: 150px;
  height: 100%;
  line-height: 50px;
  background: white;
  color: #409eff;
  text-align: center;
}
</style>